const path = require("path");
//vue-loader是专门打包vue文件的 需要手动安装  yarn add vue-loader vue-template-compiler -D
//vue-loader 依赖于 css-loader 也要手动安装一下css-loader   yarn add css-loader -D
const VueLoaderPlugin = require("vue-loader/lib/plugin");
//自动生成html文件的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//帮助我们在打包前自动删除掉dist文件夹的插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// 配置webpack
module.exports = {
  // 打包模式 production||development
  mode: "production",
  // 入口
  entry: "./src/main.js",
  // 出口
  output: {
    filename: "bundle.js", //生成文件名
    //path是Node中的路径模块,在Node中，__dirname总是指向被执行js文件的绝对路径
    path: path.resolve(__dirname, "dist"), //打包的路径
  },
  //打包的规则
  module: {
    rules: [
      {
        test: /\.m?js$/, //匹配以js结尾的文件
        exclude: /node_modules/, //排除匹配node_modules文件夹内的内容
        loader: "babel-loader", //使用babel-loader完成打包
      },
      {
        test: /\.vue$/, //匹配以vue结尾的文件
        loader: "vue-loader", //使用vue-loader完成打包
      },
      {
        test: /\.(jpg|jpeg|png|svg)$/, //匹配图片格式的文件
        loader: "url-loader", //使用file-loader完成打包
        options: {
          name: "[name].[ext]", //使用源文件的名称和后缀去生成打包文件
          limit: 4096,
        },
      },
      {
        test: /\.css$/, //匹配css格式的文件
        use: ["style-loader", "css-loader"], //使用style-laoder和css-loader完成打包
      },
      {
        test: /\.styl(us)?$/, //匹配stylus格式的文件
        use: [
          "vue-style-loader",
          "css-loader",
          "postcss-loader",
          "stylus-loader",
        ],
      },
    ],
  },
  // 插件配置
  plugins: [
    new VueLoaderPlugin(), //实例化vue-loader插件
    new HtmlWebpackPlugin({
      template: "./index.html", //以根目录下的index.html为模板生成html文件
    }), //html-webpack-plugin插件
    new CleanWebpackPlugin(),
  ],
  resolve: {
    alias: {
      //别名配置 遇到import vue from 'vue' 此时导入的vue文件就是vue/dist/vue.js
      vue: "vue/dist/vue.js",
      "~image": path.resolve(__dirname, "./src/static/images"),
    },
  },
};
